<template>
	<view class="container-my">
		<view class="my-top">
			<view class="userInfo">
				<image src="../../static/my/user.png" class="userImg"></image>
				<span class="light userNum">{{user.user.username}}</span>
			</view>
			<view class="light intrduce">
				{{$t('你好，尊敬的')}}VIP{{user.user.level}}！
			</view>
			<view class="capital">
				<p class="capitalText">{{$t('总资产')}}</p>
				<p class="capitalNum">$<span>{{user.user.balance}}</span></p>
			</view>
			<view class="my-user-bottom">
				<view class="width33">
					<p class="myusertext">{{$t('待收本金')}}</p>
					<p class="colorWhite"><span>+</span>$<span>{{user.bj}}</span></p>
				</view>
				<view class="width33">
					<p class="myusertext">{{$t('待收利息')}}</p>
					<p class="colorWhite"><span>+</span>$<span>{{user.dslx}}</span></p>
				</view>
				<view class="width33">
					<p class="myusertext">{{$t('累计收益')}}</p>
					<p class="colorWhite"><span>+</span>$<span>{{user.sy}}</span></p>
				</view>
			</view>
			<view class="my-detail-view">
				<view class="width33" @click="myInvestment">
					<image src="../../static/my/1.png" class="detail-img"></image>
					<p class="f12">{{$t('我的投资')}}</p>
				</view>
				<view class="width33"  @click="myPurse">
					<image src="../../static/my/2.png" class="detail-img"></image>
					<p class="f12">{{$t('交易明细')}}</p>
				</view>
				<view class="width33" @click="kf">
					<image src="../../static/my/3.png" class="detail-img"></image>
					<p class="f12">{{$t('线上客服')}}</p>
				</view>
			</view>
		</view>
		<view class="vacancies-view">
			<view class="vacancies">
				<view class="" style="width: 40%;">
					<p class="able-vacancies">{{$t('可用余额')}}</p>
					<p class="able-num">$<span>{{user.user.balance}}</span></p>
				</view>
				<view class="btn-group" style="width: 60%;">
					<span class="chongbtn"  @click="gotoRecharge">{{$t('充值')}}</span>
					<span class='tibtn' @click="gotoWithdraw">{{$t('提现')}}</span>
				</view>
				
			</view>
		</view>
		<view class="list-view">
			<view class="listView linebottom" @click="gotomyPurse">
				<view class="">
					<image src="../../static/my/6.png" class="itemImg"></image>
					<span>{{$t('我的钱包')}}</span>
				</view>
				<view class="listIcon">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="listView linebottom"  @click="gotomyRecharge">
				<view class="">
					<image src="../../static/my/7.png" class="itemImg"></image>
					<span>{{$t('充值记录')}}</span>
				</view>
				<view class="listIcon">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="listView linebottom"   @click="gotomyWithdrawal">
				<view class="">
					<image src="../../static/my/8.png" class="itemImg"></image>
					<span>{{$t('提现记录')}}</span>
				</view>
				<view class="listIcon">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="listView" @click="convert">
				<view class="">
					<image src="../../static/my/4.jpg" class="itemImg"></image>
					<span>{{$t('红包兑换')}}</span>
				</view>
				<view class="listIcon">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<view class="list-view">
			<view class="listView linebottom"  @click="myTeam">
				<view class="">
					<image src="../../static/my/5.png" class="itemImg"></image>
					<span>{{$t('我的团队')}}</span>
				</view>
				<view class="listIcon">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="listView"  @click="accountSetting">
				<view class="">
					<image src="../../static/my/9.png" class="itemImg"></image>
					<span>{{$t('账号设定')}}</span>
				</view>
				<view class="listIcon">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				kefu_url:""
			}
		},
		onShow() {
			uni.setTabBarItem({// 修改底部导航
				index: 0,
				text: this.$t('home'),
			});
			uni.setTabBarItem({// 修改底部导航
				index: 1,
				text: this.$t('cf'),
			});
			uni.setTabBarItem({// 修改底部导航
				index: 2,
				text: this.$t('hd'),
			});
			uni.setTabBarItem({// 修改底部导航
				index: 3,
				text: this.$t('user'),
			});
			// this.getinfo()
			this.getinfo2()
		},
		methods: {
			//我的投资
			myInvestment(){
				uni.navigateTo({
					url:'/pages/my/myInvestment'
				})
			},
			//交易明细
			myPurse(){
				uni.navigateTo({
					url:'/pages/my/myPurse'
				})
			},
			//充值
			gotoRecharge(){
				uni.navigateTo({
					url:'/pages/index/recharge'
				})
			},
			//提现
			gotoWithdraw(){
				uni.navigateTo({
					url:'/pages/index/withdraw'
				})
			},
			getinfo(){
				this.$http.get(
					'api/user/index',//接口名
					{},//参数合集
					{},
					false
				).then(res=>{
					this.user = res.data
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			kf(){
				this.tianzhuan(this.kefu_url)
			},
			tianzhuan(href){
				//#ifdef APP-PLUS
				plus.runtime.openURL(href);
				//#endif
				//#ifdef H5
				window.open(href, '_blank');
				//#endif
				// window.open(href, '_blank');
			},
			getinfo2(){
				this.$http.get(
					'api/user/infos',//接口名
					{},//参数合集
					{},
					false
				).then(res=>{
					this.user = res.data
					this.kefu_url = res.data.kefu_url
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			//我的钱包
			gotomyPurse(){
				console.log(11)
				uni.navigateTo({
					url:'/pages/my/myPurse'
				})
			},
			//充值记录
			gotomyRecharge(){
				uni.navigateTo({
					url:'/pages/my/rechargeRecord'
				})
			},
			//提现记录
			gotomyWithdrawal(){
				uni.navigateTo({
					url:'/pages/my/withdrawalRecord'
				})
			},
			// 红包兑换
			convert(){
				uni.navigateTo({
					url:'/pages/my/convert'
				})
			},
			//我的团队
			myTeam(){
				uni.navigateTo({
					url:'/pages/index/myteam'
				})
			},
			//账号设置
			accountSetting(){
				uni.navigateTo({
					url:'/pages/my/accountSetting'
				})
			}
		}
	}
</script>

<style>
	.container-my {
		background-color: #f6f6f6;
	}
	.my-top{
		width: 100%;
		height: 277px;
		background: #0a5;
		background-size: 100% 100%;
		position: relative;
	}
	.userImg{
		width:80rpx;
		height:80rpx;
		vertical-align: middle;
	}
	.light{
		color:#fff;
	}
	.userNum{
		font-size: 32rpx;
		font-weight: 700;
		margin-left:20rpx;
	}
	.userInfo{
		padding:60rpx 30rpx 16rpx 30rpx;
	}
	.intrduce{
		padding-left:30rpx;
		font-size:32rpx;
		font-weight: 700;
		margin: 20rpx 40rpx 40rpx 40rpx;
	}
	.capital{
		text-align: center;
		color:#fff;
	}
	.capitalText{
		font-size: 28rpx;
		color: #d3d5d6;
		margin: 10rpx 0;
		height:36rpx;
	}
	.capitalNum{
		font-weight: 700;
		font-size: 36rpx;
		color: #fff;
	}
	.my-user-bottom{
		display: flex;
	}
	.width33{
		width:33.33%;
		text-align: center;
	}
	.myusertext{
		font-size: 28rpx;
		color: #d3d5d6;
		height:28rpx;
		line-height:28rpx;
		margin: 20rpx 0;
	}
	.colorWhite{
		color:#fff;
		font-size: 28rpx;
		margin: 20rpx 0;
		height:28rpx;
		line-height:28rpx;
	}
	.detail-img{
		width:60rpx;
		height:60rpx;
	}
	.my-detail-view{
		display: flex;
		padding:30rpx 0;
		margin:0 2%;
		border-radius: 6px;
		background-color: #fff;
		width:96%;
		position: absolute;
		/* bottom:-100rpx; */
	}
	.f12{
		font-size:24rpx;
		margin-top:16rpx;
	}
	.vacancies{
		display: flex;
		justify-content: flex-end;
		background: #fff;
		border-radius: 5px;
		padding: 15px;
	}
	.vacancies>view{
		flex:1;
	}
	.vacancies-view{
		width: 96%;
		margin:0 2%;
		margin-top:112rpx;
	}
	.able-vacancies{
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
		height:24rpx;
		line-height: 24rpx;
	}
	.able-num{
		font-size: 28rpx;
		font-weight: 700;
		height:28rpx;
		line-height: 28rpx;
		padding:0;
		margin:0;
	}
	.btn-group{
		text-align: right;
		margin-top:12rpx;
	}
	.chongbtn{
		color: #fff;
		background: #0a5;
		padding: 10rpx 20rpx;
		border-radius: 5px;
		margin: 0 10rpx;
		font-size:24rpx;
	}
	.tibtn{
		color: #0a5;
		background: #e9f0fb;
		padding: 10rpx 20rpx;
		border-radius: 5px;
		margin: 0 10rpx;
		font-size:24rpx;
	}
	.itemImg{
		width:60rpx;
		height:60rpx;
		vertical-align: middle;
		margin-right:20rpx;
	}
	.listView{
		display: flex;
		justify-content: flex-end;
		padding: 30rpx;
	}
	.listIcon{
		flex: 1;
		text-align: right;
	}
	.list-view{
		background-color: #fff;
		width: 96%;
		margin: 20rpx 2%;
		border-radius: 5px;
		
	}
	.linebottom{
		border-bottom: 1px solid #ebedf0;
	}
</style>
